<template>
  <div>
    dl<router-link to="/">返回首页</router-link><br />
    <el-button type="primary" circle @click="a($event)">Text</el-button>
    <el-button type="primary" circle @click="a($event)">Table</el-button>
    <el-button type="primary" circle @click="a($event)">Form</el-button>
    <el-button type="primary" circle @click="ToDlA">Router</el-button>
    <!-- <router-link to="/dl/DlA"><el-button type="primary" circle>Router</el-button></router-link> -->
    <router-view></router-view>
    <div id="myform"> 
      <!-- <Tex />
    <Table />
    <Form /> -->
    </div>
    
  </div>
</template>

<script>
import Tex from './dl/tex'
import Table from './dl/table'
import Form from './dl/form'
export default {
  components: {
    Tex,
    Table,
    Form,
  },
  methods: {
    a(e) {
      console.log(e)
      console.log(e.target.innerText)
      if(e.target.innerText=="Text"){
        this.$router.push({path:'/dl/Tex'})
      }
      else if(e.target.innerText=="Table"){
        this.$router.push({path:'/dl/Table'})
      }else if(e.target.innerText=="Form"){
        this.$router.push({path:'/dl/Form'})
      }
      
    },
    ToDlA(){
      this.$router.push({
        path:'/dl/DlA',
      })
      document.getElementById("myform").style.display='none'
    }
  },
}
</script>

<style scoped>
h2 {
  margin-top: 70px;
}
</style>
